<template>
	<div class="e-btn-box">
		<el-button v-for="(item, index) in btn" :key="index" size="small" type="text" style="float: left;"
			:icon="item.icon ? `el-icon-${item.icon}` : ''" v-bind="item.props"
			@click="handleBtnClick(item.event)">{{item.title}}</el-button>
	</div>
</template>

<script>
	import btnList from './btnList'
	export default {
		name: 'e-operation',
		components: {},
		props: {
			btns: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {}
		},
		watch: {},
		computed: {
			btn() {
				const list = []
				this.btns.map(item => {
					const type = this.$tools.getRawType(item)
					if (type === 'String') {
						if (btnList[item]) {
							list.push(btnList[item])
						}
					}
					if (type === 'Object') {
						if (this.$tools.hasKey(item, 'title') && this.$tools.hasKey(item, 'event')) {
							list.push(item)
						}
					}
				})
				return list
			}
		},
		methods: {
			handleBtnClick(name) {
				this.$emit(name)
			}
		},
		created() {},
		mounted() {}
	}
</script>
<style lang="scss" scoped>
	.e-btn-box {
		background: #e9eef2;
		text-align: right;
		width: 100%;
		overflow: hidden;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		padding: 0 20px;
		margin-bottom:10px;
		.el-button--text{
			color:#42589a;
		}
	}
</style>